import React, { useEffect, useState } from "react";
import { DownloadOutlined, createFromIconfontCN } from "@ant-design/icons";
import { Button, Descriptions, Layout, theme } from "antd";
import { UserDataType } from "../userlist";
import axios from "axios";
import {
  useLocation,
  useParams,
  useSearchParams,
  useNavigate,
} from "react-router-dom";
import { RootState } from "../../app/store";
import { useAppSelector } from "../../app/hooks";
import dayjs from "dayjs";
const { Content } = Layout;
const App: React.FC = () => {
  const IconFont = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js",
  });

  const navigate = useNavigate();
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  interface RoleSelectOption {
    value: string;
    label: string;
  }
  const roleList = useAppSelector((state: RootState) => state.role.roleMsg);

  function getRoleSelectOptions(): RoleSelectOption[] {
    const options: RoleSelectOption[] = [];
    roleList.map((role) => {
      const option: RoleSelectOption = {
        value: role.id,
        label: role.name,
      };
      options.push(option);
    });
    return options;
  }

  const roleOptions = getRoleSelectOptions() 
  let [searchParams, setSearchParams] = useSearchParams();

  const [user, setUser] = useState<UserDataType>({} as UserDataType);

  function getUserDetail() {
    axios.get(`/api/accounts/${searchParams.get("id")}`).then((response) => {
      setUser(response.data);
    });
  }

  useEffect(() => {
    getUserDetail();
  }, []);

  return (
    <div>
      <Content
        style={{
          margin: "24px 16px",
          padding: 24,
          minHeight: 280,
          background: colorBgContainer,
        }}
      >
        <Descriptions title="账户的详细信息">
          <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
          <Descriptions.Item label="密码">{user.password}</Descriptions.Item>
          <Descriptions.Item label="电话">{user.phone? user.phone:"无电话"}</Descriptions.Item>
          <Descriptions.Item label="角色">
            {roleOptions.map((item) =>
              item.value === user.role ? item.label : ""
            )}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{ dayjs(new Date(user.createtime)).format("YYYY年MM月DD日 HH:mm:ss")}</Descriptions.Item>
          <Descriptions.Item label="更新时间">
            { dayjs(new Date(user.updatetime)).format("YYYY年MM月DD日 HH:mm:ss")}
          </Descriptions.Item>
        </Descriptions>
        <Button
          type="primary"
          shape="round"
          icon={<IconFont type="icon-tuichu" />}
          size={"large"}
          onClick={() => {
            navigate("/userlist");
          }}
        >
          回到列表页
        </Button>
      </Content>
    </div>
  );
};

export default App;
